<template>
	<view class="container">
		<view  style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<uni-icons type="left" size="20" color="#fff" @click="goToBack"></uni-icons>
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 130px;">申请提现</text>
		</view>
		<view class="content-top">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="账户余额">
					<text class="balance">￥1500元</text>
				</uni-forms-item>
				<uni-forms-item label="提现金额" name="money">
					<uni-easyinput v-model="valiFormData.money" placeholder="请输入提现金额" />
				</uni-forms-item>
				<uni-forms-item label="真实姓名" name="realName">
					<uni-easyinput v-model="valiFormData.realName" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="请选择银行" name="bank">
					<uni-data-select v-model="valiFormData.bank" :localdata="bank" @change="onBankChange"
						:clear="false" ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="银行卡号" name="bankNumber">
					<uni-easyinput v-model="valiFormData.bankNumber" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<text style="font-size: 12px; color: #999; ">车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</text>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" style="border-radius: 20px; background-color: #1564E6;">确认信息并提交</button>
		</view>
		<view class="content-bottom">
			<uni-list-item title="提现记录" style="border-radius: 10px;" />
			<uni-list border-full>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<view class="tips-content">
							<text class="tips">+ 50.00</text>
							<text class="tip-status">审核中</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<view class="tips-content">
							<text class="tips">+ 50.00</text>
							<text class="tip-status">审核通过</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<view class="tips-content">
							<text class="tips">+ 50.00</text>
							<text class="tip-status">审核不通过</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<view class="tips-content">
							<text class="tips">+ 50.00</text>
							<text class="tip-status">审核不通过</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
<view style="height: 50px;">
</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				value: 0,
				bank: [{
						value: 0,
						text: "工商银行"
					},
					{
						value: 1,
						text: "农业银行"
					}
				],
				// 校验表单数据
				valiFormData: {
					money: '',
					realName: '',
					bankNumber: '',
					bank: 0  // 添加 bank 字段以保存选择的银行下标
				},
				// 校验规则
				rules: {
					realName: {
						rules: [{
							required: true,
							errorMessage: '真实姓名不能为空'
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '提现金额不能为空'
						}, {
							format: 'number',
							errorMessage: '提现金额只能输入数字'
						}]
					},
					bankNumber: {
						rules: [{
							required: true,
							errorMessage: '银行卡号不能为空'
						}]
					},
					bank: {
						rules: [{
							required: true,
							errorMessage: '请选择银行'
						}]
					}
				}
			}
		},
		methods: {
			goToBack(){
				uni.navigateBack()
			},
			onBankChange(e) {
				this.valiFormData.bank = e.detail.value;
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					});
					// 提交数据
					console.log('提交数据:', this.valiFormData);
					uni.navigateTo({
						url:'/pages/moneyDetail/requestSuccess/requestSuccess'
					})
				}).catch(err => {
					console.log('err', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	
	
	.form-item {
		display: flex;
		align-items: center;
	}
	
	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	.container {
		background-color: #e9e9eb;
	}

	.top {
		background-color: #2979ff;
		height: 150px;
	}

	.content-top {
		height: 380px;
		background-color: #fff;
		margin: -130px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;
	}
	.balance{
		line-height: 35px;
		color:#FF6433;
		font-weight: bold;
	}

	.content-bottom {

		background-color: #fff;
		margin: 10px 10px 0;
		border-radius: 15px;
		display: flex;
		flex-direction: column;


	}
	


	.tips {
		font-size: 14px;
		color: #FF6433;
		font-weight: bold;
		display: block;
	}

	.tip-status {
		display: block;
		font-size: 12px;
		/* 可以根据需要调整字体大小 */
		color: #999999;
		/* 设置不同的颜色以区分状态 */
		text-align: right;
	}
</style>